<template>
  <a-page-header>
    <a-card>
      <a-table :columns="columns" :data-source="data"
               :loading="loading"
               :rowKey="record => record.movieShowId" >
        <template slot="title">
          <a-row type="flex" justify="space-between">
            <a-col :span="4">
              <a-button type="primary" style="margin-left: 10px;" icon="plus-circle" @click="showAddModal()" >
                新增排片
              </a-button>
              <a-modal
                  :title="modalForm.title"
                  :visible="modalForm.visible"
                  :confirm-loading="modalForm.confirmLoading"
                  okText="提交"
                  cancelText="取消"
                  @ok="handleModalOk"
                  @cancel="handleModalCancel">

                <a-form-model @submit="handleModalFormSubmit"
                              :label-col="{span:4}" :wrapper-col="{span:14}" ref="addForm"
                              :model="addForm" :rules="modalForm.modalFormRules">
                  <a-form-model-item label="放映影院" ref="cinemaId" prop="cinemaId">
                    <a-select
                        v-model="addForm.cinemaId"
                        :disabled="modalForm.isDisabled"
                        style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        @change="cinemaChange"
                        placeholder="请选择放映影院">
                      <a-select-option :value="item.cinemaId" v-for="item in cinemaList" :key="'cinema'+item.cinemaId">
                        {{item.cinemaName}}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>

                  <a-form-model-item label="放映影厅" ref="cinemaHallId" prop="cinemaHallId">
                    <a-select
                        v-model="addForm.cinemaHallId"
                        :disabled="modalForm.isDisabled"
                        style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        placeholder="请选择所属影厅">
                      <a-select-option :value="item.cinemaHallId" v-for="item in cinemaHallList" :key="'cinemaHall'+item.cinemaHallId">
                        {{item.cinemaHallName}}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="放映电影" ref="movieId" prop="movieId">
                    <a-select
                        v-model="addForm.movieId"
                        :disabled="modalForm.isDisabled"
                        style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        placeholder="请选择电影">
                      <a-select-option :value="item.movieId" v-for="item in movieList" :key="'movie'+item.movieId">
                        {{item.movieName}}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>

                  <a-form-model-item label="放映日期" ref="showDate" prop="showDate">
                    <a-date-picker
                        v-model="addForm.showDate"
                        valueFormat="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        placeholder="放映日期"
                        style="width: 100%;"
                    />
                  </a-form-model-item>

                  <a-form-model-item label="放映时间" ref="showTime" prop="showTime">
                    <a-time-picker v-model="addForm.showTime" valueFormat="HH:mm:ss" placeholder="放映时间" style="width: 100%;"/>
                  </a-form-model-item>

                  <a-form-model-item label="原价" ref="oldPrice" prop="oldPrice">
                    <a-input-number style="width: 100%" v-model="addForm.oldPrice"  :min="0" :step="0.1" />
                  </a-form-model-item>
                  <a-form-model-item label="折后价" ref="newPrice" prop="newPrice">
                    <a-input-number style="width: 100%" v-model="addForm.newPrice"  :min="0" :step="0.1" />
                  </a-form-model-item>

                </a-form-model>
              </a-modal>
            </a-col>

            <a-col >
              <a-form-model ref="queryForm"
                            layout="inline" :model="formInline">
                <a-form-model-item ref="movieShowNameLike" prop="movieShowNameLike">
                  <a-input v-model="formInline.movieShowNameLike" placeholder="模糊查询电影放映名称">
                  </a-input>
                </a-form-model-item>


                <a-form-model-item>
                  <a-button
                      type="primary"
                      @click="handleSubmit">
                    查询
                  </a-button>
                  <a-button style="margin-left: 10px;" @click="resetSearchForm('queryForm')">
                    重置
                  </a-button>
                </a-form-model-item>
              </a-form-model>
            </a-col>
          </a-row>
        </template>

        <template #cinemaId="cinemaId">
          {{getCinemaName(cinemaId)}}
        </template>

        <template #cinemaHallId="cinemaHallId">
          {{getCinemaHallName(cinemaHallId)}}
        </template>

        <template #movieId="movieId">
          {{getMovieName(movieId)}}
        </template>

        <template #action="record">
          <a-button type="primary" shape="circle" icon="edit" @click="showEditModal(record)" />
          <a-divider type="vertical" />
          <a-popconfirm
              :title="`确认要删除吗?`"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handleDeleteMovieShow(record.movieShowId)"
          >
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a-button type="danger" shape="circle" icon="delete" />
          </a-popconfirm>

        </template>

      </a-table>
    </a-card>
  </a-page-header>
</template>

<script>
import {
  addMovieShow,
  updateMovieShow,
  logicDeleteMovieShowById,
  getMovieShowList,
  queryMovieShowLike
} from "@/api/movieShow";
import {getMovieShowSelectMap} from "@/api/movieShow";

const columns = [
  {
    title: '放映标识',
    dataIndex: 'movieShowId',
    key: 'movieShowId',
  },
  {
    title: '放映电影',
    dataIndex: 'movieId',
    key: 'movieId',
    scopedSlots: { customRender: 'movieId' },
  },
  {
    title: '所属影院',
    dataIndex: 'cinemaId',
    key: 'cinemaId',
    scopedSlots: { customRender: 'cinemaId' },
  },
  {
    title: '所属影厅',
    dataIndex: 'cinemaHallId',
    key: 'cinemaHallId',
    scopedSlots: { customRender: 'cinemaHallId' },
  },
  {
    title: '放映日期',
    dataIndex: 'showDate',
    key: 'showDate',
  },
  {
    title: '放映时间',
    dataIndex: 'showTime',
    key: 'showTime',
  },
  {
    title: '开始时间',
    dataIndex: 'startTime',
    key: 'startTime',
  },
  {
    title: '结束时间',
    dataIndex: 'endTime',
    key: 'endTime',
  },
  {
    title: '放映类型',
    dataIndex: 'showType',
    key: 'showType',
  },
  {
    title: '折后价',
    dataIndex: 'newPrice',
    key: 'newPrice',
  },
  {
    title: '原价',
    dataIndex: 'oldPrice',
    key: 'oldPrice',
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  }
];



const modalFormRules = {
  cinemaId: [
    {required: true, message: '请选择影院',trigger:['blur','change']},
  ],
  cinemaHallId: [
    {required: true, message: '请选择影厅', trigger: ['blur','change']},
  ],
  movieId: [
    {required: true, message: '请选择电影', trigger:['blur','change']},
  ],
  showDate:[
    {required: true, message: '请填写放映日期', trigger: ['blur','change']}
  ],
  showTime:[
    {required: true, message: '请填写放映时间', trigger: ['blur','change']}
  ],
  oldPrice:[
    {required: true, message: '请填写原价', trigger: ['blur','change']}
  ],
  newPrice:[
    {required: true, message: '请填写折后', trigger: ['blur','change']}
  ],
}
export default {
  name: "SystemCinemaMovieShow",
  data() {
    return {
      formInline: {
        movieShowNameLike: '',
        searchStatus: undefined,
      },
      modalForm:{
        title:'',
        visible:false,
        confirmLoading: false,
        modalFormRules,
        isDisabled:false
      },
      addForm:{
        movieShowId:undefined,
        cinemaId:undefined,
        cinemaHallId:undefined,
        movieId:undefined,
        showDate:'',
        showTime:'',
        startTime:undefined,
        endTime:undefined,
        showType:'',
        newPrice:undefined,
        oldPrice:undefined,
      },
      cinemaList:[],
      cinemaHallMap:{},
      cinemaHallList:[],
      cinemaHallSelectList:[],
      movieList:[],
      data:[],
      loading:false,
      columns,
      isHandleSubmit:false,
    }
  },
  mounted() {
    this.getSelectMap()
    this.getMovieShowData()
  },
  methods:{
    // 变更影院的时候 改变影厅的数据
    cinemaChange(value){
      this.cinemaHallSelectList = this.cinemaHallMap[value]
    },
    getCinemaName(cinemaId){
      for (let item of this.cinemaList){
        if (item.cinemaId===cinemaId){
          return item.cinemaName
        }
      }
      return cinemaId
    },
    getCinemaHallName(cinemaHallId){
        for (let item of this.cinemaHallList){
          if (item.cinemaHallId===cinemaHallId){
            return item.cinemaHallName
          }
        }
      return cinemaHallId
    },
    getMovieName(movieId){
      for (let item of this.movieList){
        if (item.movieId===movieId){
          return item.movieName
        }
      }
      return movieId
    },
    // 查询表单提交
    print(a,b){
      console.log(a,b)
    },
    handleSubmit() {
      console.log(this.formInline)
      queryMovieShowLike(this.formInline.movieShowNameLike).then(res=>{
        this.data = res.data
      })
    },
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
      if (this.isHandleSubmit){
        this.getMovieShowData()
      }
    },
    getSelectMap(){
      getMovieShowSelectMap().then(res=>{
        console.log(res)
        this.cinemaList  = res.data['cinemaList']
        this.movieList = res.data['movieList']
        this.cinemaHallList = res.data['cinemaHallList']
        this.cinemaHallMap = res.data['cinemaHallMap']

      }).catch(err=>{
        console.log("SystemMovieShow:getSelectMap:"+err.message);
      })
    },
    getMovieShowData(){
      this.loading = true
      getMovieShowList().then(res=>{
        this.data = res.data
      }).catch(err=>{
        console.log("SystemMovieShow:getMovieShowTreeData:"+err.message);
      }).finally(()=>{
        this.loading = false
      })
    },
    // addForm start
    showAddModal(){
      this.modalForm.isDisabled = false;
      this.modalForm.visible =  true
      this.modalForm.title = '新增电影放映'
    },
    showEditModal(record){
      console.log(record)
      this.modalForm.isDisabled = true
      this.modalForm.visible =  true
      this.modalForm.title = '修改电影放映'
      let {movieShowId,  cinemaId, cinemaHallId, movieId, showDate,
        showTime, startTime, endTime, showType, newPrice, oldPrice} = record
      this.addForm = {
        movieShowId,
        cinemaId,
        cinemaHallId,
        movieId,
        showDate,
        showTime,
        startTime,
        endTime,
        showType,
        newPrice,
        oldPrice,
      }
    },
    // 处理modal里的表单提交
    handleModalOk(){
      this.handleModalFormSubmit()
    },
    handleModalCancel(){
      this.modalForm.visible = false
      this.resetForm('addForm')
    },
    handleModalFormSubmit(){
      this.$refs['addForm'].validate(valid=>{
        if (valid) {
          let submitData = this.addForm
          this.modalForm.confirmLoading = true
          if (this.modalForm.isDisabled){
            this.handleUpdateMovieShow(submitData)
          }else {
            this.handleAddMovieShow(submitData)
          }
        } else {
          this.handleFiled(new Error('表单校验不通过'))
          return false;
        }
      })
    },
    resetForm(formName) {
      this.addForm = {
        movieShowId:undefined,
        cinemaId:undefined,
        cinemaHallId:undefined,
        movieId:undefined,
        showData:'',
        showTime:'',
        startTime:undefined,
        endTime:undefined,
        showType:'',
        newPrice:undefined,
        oldPrice:undefined,
      }
      this.$refs[formName].resetFields();
    },
    // addForm end
    handleAddMovieShow(movieShow){
      addMovieShow(movieShow).then(res=>{
        this.handleSuccess(res)
        this.resetForm('addForm')
      }).catch(err=> this.handleFiled(err))
    },
    handleDeleteMovieShow(movieShowId){
      logicDeleteMovieShowById(movieShowId).then(res=>{
        this.handleSuccess(res)
      }).catch(err=> this.handleFiled(err))
    },
    handleUpdateMovieShow(movieShow){
      updateMovieShow(movieShow).then(res=>{
        this.handleSuccess(res)
        this.resetForm('addForm')
      }).catch(err=> this.handleFiled(err))
    },
    handleSuccess(res){
      this.modalForm.confirmLoading = false
      this.$notification['success']({
        message: '成功',
        description: `${res.data}`,
        duration: 4
      })
      this.getMovieShowData()
    },
    handleFiled(err){
      this.modalForm.confirmLoading = false
      console.log(err.message)
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).message || {}).message||err.message || '请求出现错误，请稍后再试',
        duration: 4
      })
    }
  },

  computed:{
    isDisable(){
      return this.formInline.movieShowNameLike===''&&!this.formInline.searchStatus;
    }
  }
}
</script>

<style scoped>

</style>
